import React from 'react'
import {Row, Col} from 'antd'
import MobileUserCenter from './mobile_usercenter'
import {Router, Route, Link, browserHistory} from 'react-router'
import {
    Menu,
    Icon,
    Tabs,
    message,
    Form,
    Input,
    Button,
    Checkbox,
    Modal
} from 'antd'
const FormItem = Form.Item
const TabPane = Tabs.TabPane
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
class MobileHeader extends React.Component {

    constructor() {
        super()
        this.state = {
            current: 'top',
            modalVisble: false,
            action: 'login',
            hasLogined: false,
            userNickName: '',
            userid: 0
        }
    }
    handleClick(e) {
        if (e.key == "register") {
            this.setState({current: "register"})
            this.setModalVisble(true)
        } else {
            this.setState({current: e.key})
        }
    }
    setModalVisble(value) {
        this.setState({modalVisble: value})
    }
    handleSubmit(e) {
        e.preventDefault()
        const myFetchOptions = {
            methods: 'GET'
        }
        const formData = this
            .props
            .form
            .getFieldsValue()
        console.log(formData)
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=register&username=username&p" +
                    "assword=password&r_userName=" + formData.r_userName + "&r_password=" + formData.r_password + "&r_confirmPassword=" + formData.r_confirmPassword, myFetchOptions)
            .then(response => response.json())
            .then(json => {
                this.setState({userNickName: json.userNickName, userid: json.userid})
            })
        if (this.state.action == "login") {
            this.setState({hasLogined: true})
        }
        message.success("请求成功")
        this.setModalVisble(false)
    }
    callback(key) {
        if (key == 1) {
            this.setState({ action: 'login' });
        } else if (key == 2) {
            this.setState({ action: 'register' });
        }
    }

    login() {
        this.setModalVisble(true)
    }

    render() {
        const {getFieldDecorator} = this.props.form
        const userShow = this.state.hasLogined
            ? <Link to={`/MobileUserCenter`}>
                <Icon type="inbox"/>
             </Link>
            : <Icon
                type="setting"
                onClick={this
                .login
                .bind(this)}/>
        return (
            <div id="mobileheader">
                <header>
                    <img src="./src/images/news.png" alt="logo"/>
                    <span>ReactNews</span>
                    {userShow}
                </header>
                <Modal
                    title="用户中心"
                    wrapClassName="vertical-center-modal"
                    visible={this.state.modalVisble}
                    onCancel={() => this.setModalVisble(false)}
                    onOk={() => this.setModalVisble(false)}
                    okText="关闭">

                    <Tabs type="card">
                        <TabPane tab="登录" key="1">
                            <Form
                                layout="horizontal"
                                onSubmit={this
                                .handleSubmit
                                .bind(this)}>
                                <FormItem label="账户">
                                    {getFieldDecorator('userName', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请输入账号!'
                                            }
                                        ]
                                    })(
                                        <Input prefix={< Icon type = "user" />} placeholder="请输入账号"/>
                                    )}
                                </FormItem>
                                <FormItem label="密码">
                                    {getFieldDecorator('password', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请输入密码!'
                                            }
                                        ]
                                    })(
                                        <Input prefix={< Icon type = "lock" />} placeholder="请输入密码" type="password"/>
                                    )}
                                </FormItem>
                                <Button type="primary" htmlType="submit">登录</Button>
                            </Form>
                        </TabPane>
                        <TabPane tab="注册" key="2">
                            <Form
                                layout="horizontal"
                                onSubmit={this
                                .handleSubmit
                                .bind(this)}>
                                <FormItem label="账户">
                                    {getFieldDecorator('r_userName', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请输入账号!'
                                            }
                                        ]
                                    })(
                                        <Input prefix={< Icon type = "user" />} placeholder="请输入账号"/>
                                    )}
                                </FormItem>
                                <FormItem label="密码">
                                    {getFieldDecorator('r_password', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请输入密码!'
                                            }
                                        ]
                                    })(
                                        <Input prefix={< Icon type = "lock" />} placeholder="请输入密码" type="password"/>
                                    )}
                                </FormItem>
                                <FormItem label="确认密码">
                                    {getFieldDecorator('r_confirPassword', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请再次输入密码!'
                                            }
                                        ]
                                    })(
                                        <Input prefix={< Icon type = "lock" />} placeholder="请再次输入密码" type="password"/>
                                    )}
                                </FormItem>
                                <Button type="primary" htmlType="submit">注册</Button>
                            </Form>
                        </TabPane>
                    </Tabs>

                </Modal>
            </div>
        )
    }
}

export default MobileHeader = Form.create({})(MobileHeader)